<template>
    <view class="container">
        <view class="head">
            <img src="../../static/黑客与画家.jpg" alt="" />
            <text class="title">黑客与画家</text>
            <text class="author">罗</text>
        </view>
        <view class="sub-container">
            <text class="headline">短评</text>
            <view class="comment-container">
                <block v-for="">
                    <tag>
                        <!-- <text class="after">23</text> -->
                    </tag>
                </block>
            </view>
        </view>

        <view class="sub-container">
            <text class="headline">内容简介</text>
            <text class="content"
                >《黑客与画家：硅谷创业之父paul graham文集》是硅谷创业之父paul
                graham
                的文集，主要介绍黑客即优秀程序员的爱好和动机，讨论黑客成长、黑客对世界的贡献以及编程语言和黑客工作方法等所有对计算机时代感兴趣的人的一些话题。书中的内容不但有助于了解计算机编程的本质、互联网行业的规则，还会帮助读者了解我们这个时代，迫使读者独立思考</text
            >
        </view>

        <view class="sub-container">
            <text class="headline">书本信息</text>
            <view class="detail-container">
                <view class="vertical description">
                    <text>出版社</text>
                    <text>出版年</text>
                    <text>页数</text>
                    <text>定价</text>
                    <text>装帧</text>
                </view>
                <view class="vertical">
                    <text></text>
                    <text></text>
                    <text></text>
                    <text></text>
                    <text></text>
                </view>
            </view>
        </view>

        <view class="post-container" v-if="!posting">
            <view @click="onFakePost" class="post-fake">
                <text>输入短评</text>
            </view>
            <view class="like-container">
                <like class="like"></like>
               <buttom class="share-btn">
                    <img
                        class="share"
                        src="../../static/share@2x.png"
                        slot="img"
                        alt=""
                    />
                </buttom>
            </view>
        </view>
        <view class="posting-container"  v-if="posting" >
            <view class="post-header">
                <text v-if="true">仅可点击标签+1</text>
                <text @click="onCancel" class="cancel">取消</text>
            </view>
            <view class="comment-container">
                  <block v-for="">
                    <tag>
                        <!-- <text class="after">23</text> -->
                    </tag>
                </block>
            </view>
            <input class="post" placeholder='短评最多12个字'></input>
        </view>
         <mask v-if="posting"></mask>
    </view>
</template>

<script>
import { getDetail, } from "@/api/book.js";
import like from "@/components/like/like.vue";
import buttom from "@/components/buttom/buttom.vue";
import tag from "@/components/tag/tag.vue";
import mask from "@/components/mask/mask.vue";

export default {
    components: {
        tag,
        like,
        mask,
        buttom
    },
    data () {
        return {
            posting: false
        }
    },
    methods: {
        onFakePost () {
            // 点击显示
            this.posting = true
        },

        onCancel () {
            // 点击隐藏
            this.posting = false
        },
    }
}
</script>

<style lang="scss">
.container {
    background-color: #f5f5f5;
    width: 100%;
}

.head {
    background-color: #fff;
    padding-top: 40rpx;
    padding-bottom: 40rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.title {
    color: #2f2f2f;
    margin-top: 20rpx;
    font-size: 38rpx;
    font-weight: 600;
}

.author {
    font-size: 28rpx;
    color: #999;
}

.head image {
    width: 200rpx;
    height: 300rpx;
    box-shadow: 2px 2px 3px #e3e3e3;
}
.sub-container {
    width: 690rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30rpx;
    background-color: #fff;
    padding: 30rpx;
}

.headline {
    font-size: 30rpx;
    font-weight: 600;
    color: #2f2f2f;
    margin-bottom: 20rpx;
}

.comment-container tag {
    margin-right: 15rpx;
    margin-bottom: 10rpx;
}

.ex-tag1 {
    background-color: #fffbdd !important;
    margin-right: 10px;
    margin-bottom: 10px;
}

.ex-tag2 {
    background-color: #eefbff !important;
    margin-right: 10px;
}

.content {
    text-indent: 58rpx;
    font-weight: 500;
}

.num {
    margin-left: 10rpx;
    font-size: 22rpx;
    color: #aaa;
}

.detail-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-bottom: 100rpx;
    font-size: 28rpx;
    color: #666;
}

.vertical {
    display: flex;
    flex-direction: column;
}

.description {
    color: #999;
    margin-right: 30rpx;
}

.post-container {
    height: 100rpx;
    box-shadow: 1px -1px 1px #e3e3e3;
    position: fixed;
    width: 690rpx;
    background-color: #fff;
    bottom: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 30rpx;
    justify-content: space-between;
}

.post-fake {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 60rpx;
    width: 460rpx;
    border: 1px solid #999;
    border-radius: 15px;
    font-size: 22rpx;
    padding-left: 20rpx;
}

.like {
    margin-right: 30rpx;
    margin-top: 10rpx;
}

.like-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.posting-container {
    bottom: 0;
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
    width: 100%;
    z-index: 999;
}

.post-header {
    width: 100%;
    border-bottom: 1px solid #f5f5f5;
    border-top: 1px solid #f5f5f5;
    height: 100rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.cancel {
    color: #666;
}

.post-header text {
    padding: 25rpx;
}

.post-header > text:first-child {
    font-size: 28rpx;
    color: #bbb;
}
.posting-container .comment-container {
    width: 690rpx;
    padding: 40rpx 30rpx 0 30rpx;
}

.post {
    width: 690rpx;
    margin: 30rpx auto;
    height: 56rpx;
    background-color: #f5f5f5;
    border-radius: 15px;
    padding-left: 25rpx;
}
.share-btn {
    margin-top: 28rpx;
    margin-left: 10rpx;
}
.share {
    width: 40rpx;
    height: 40rpx;
}
</style>
